<!-- -->
<template>
  <div class="rent-house">
    <Header>
      <input type="text" placeholder="请输入楼盘名称" v-model="values" @input="search" />
      <span slot="map">地图找房</span>
    </Header>
    <div class="con">
      <div class="screen">
        <SelectMeau @price="searchPrice" @city="searchCity" @type="searchType" :classify="type"></SelectMeau>
      </div>
      <div
        v-for="(val, i) in list"
        :key="i"
        class="classify-item"
        @click="jumpDetail(val.id,val.area)"
      >
        <img :src="val.img" alt />
        <div class="classify-info">
          <p>
            <span>在售</span>
            <span>{{ val.listingTitle }}</span>
          </p>
          <div>{{ val.area }}|建面{{ val.houseArea }}|{{ val.fitmentType }}</div>
          <p>{{ val.sellingprice }}/套</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import SelectMeau from "@/components/SelectMeau.vue";

import { getRentHouseList } from "@/api";

export default {
  // import引入到组件需要注入到对象中才能使用
  components: { Header, SelectMeau },
  data() {
    // 这里存放数据
    return {
      type: 5,
      list: [],
      values: ""
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 获取二手房数据
    getAllOldHouse() {
      getRentHouseList({ classify: this.type, values: this.values }).then(
        res => {
          this.list = res.data;
        }
      );
    },
    // 跳转详情
    jumpDetail(id, area) {
      this.$router.push(`/detail/${id}/${area}`);
    },
    // 搜索
    search() {
      this.getAllOldHouse();
    },
    // 搜索价格
    searchPrice(data) {
      this.list = data;
    },
    // 搜索区域
    searchCity(data) {
      this.list = data;
    },
    // 搜索类型
    searchType(data) {
      this.list = data;
    }
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {
    this.getAllOldHouse();
  },
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.classify-item {
  display: flex;
  padding: 10px;
  img {
    width: 100px;
    height: 100px;
  }
  .classify-info {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    justify-content: space-between;
    p {
      display: flex;
      span:nth-of-type(1) {
        display: flex;
        justify-content: center;
        padding: 4px 7px;
        background: #ccc;
        font-size: 14px;
      }
      span:nth-of-type(2) {
        font-size: 18px;
        padding-left: 15px;
      }
    }
  }
}
</style>
